<template>
	<view class="content">
		<view class="status_bar"></view>
		<view class="top-bar f-c-c cw f30">
			<u-icon size="40" class="arrLe" name="arrow-left" @click="$back(1)"></u-icon>
			<view>{{topTabName}}</view>
		</view>

		<u-tabs-swiper active-color='#FF8710' @change="tabsChange" :current="current" ref="tabs" :list="list"
			:is-scroll="false">
		</u-tabs-swiper>
		
		<view >
			<view v-for="(item,index) in dataList" class="item f-c-b" @click="$to(`../product_detail/product_detail`)">
				<view class="item-left">
					<image :src="item.url" mode="widthFix"></image>
				</view>
				<view class="item-right">
					<view class="title">
						{{item.title}}
					</view>
					<view class="price_browse f-c-b f30">
						<view class="price">
							<text class="f40">￥{{item.price.split('.')[0]}}.</text>
							<text>{{item.price.split('.')[1]}}</text>
						</view>
						<view class="browse f25 c6">
							浏览：{{item.browse}}人
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				topTabName: '',
				list: [{
					name: '红木'
				}, {
					name: '乔木'
				}, {
					name: '榆木'
				}, {
					name: '柳木'
				}, {
					name: '柳木'
				}],
				current: 0,
				dataList:[{
					title:"甩开油田清爽一夏·【美国版】持 妆DW粉底液30ml 补水遮瑕持久...",
					price:'88.88',
					browse:200,
					url:"../../static/index/img_sp.png"
				},{
					title:"甩开油田清爽一夏·【美国版】持 妆DW粉底液30ml 补水遮瑕持久...",
					price:'88.88',
					browse:200,
					url:"../../static/index/img_sp.png"
				}],
			}
		},
		onLoad(e) {
			console.log(e);
			this.topTabName = e.title
		},
		methods: {
			tabsChange(index) {
				this.current = index;
			},
		}
	}
</script>

<style>
	.content {
		background-color: #F4F4F4;
		height: 100vh;
	}

	.top-bar {
		background-color: #FF8710;
		height: 80rpx;
	}

	.arrLe {
		position: absolute;
		left: 20rpx;
	}
	
	.item{
		background-color: #FFFFFF;
		margin: 10rpx 0;
		padding: 20rpx;
	}
	.item-left image{
		width: 160rpx;
	}
	.item-right{
		margin: 0 25rpx;
	}
	.price_browse{
		margin-top: 20rpx;
	}
	.price{
		color: #FF2929;
	}
</style>
